<style>
    .panel-heading{border-bottom:0}
    .city-rank{width:200px;margin-top:150px}
    .city-rank p{font-size:14px;color:#535351;font-weight:bold;}
    .rank{list-style: none;padding:0}
    .marLeft10{margin-left:10px}
</style>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <span>{$lottery['title']} - 数据分析</span>
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs" id="myTab">
                        <li><a href="/User/Lottery/statistics?id={$id}">活动数据</a></li>
                        <li class="active"><a href="javascript:;">用户分析</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <div class="panel-body">
                                <div class="col-sm-6">
                                    <section class="panel">
                                        <div class="panel-body">
                                            <div id="container" style="min-width:500px;height:500px"></div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-sm-6">
                                    <section class="panel">
                                        <div class="panel-body">
                                            <div id="container2" style="min-width:500px;height:500px"></div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-sm-6">
                                    <section class="panel">
                                        <div class="panel-body">
                                            <div id="container3" style="min-width:500px;height:500px"></div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-sm-6">
                                    <div class="panel-body">
                                        <div class="city-rank">
                                            <p>top10城市</p>
                                            <ul class="rank">
                                                <volist name="cityRank" id="rank" offset="0" length="10">
                                                    <li>
                                                        <span>{$i}、{$rank.name}</span>
                                                        <span class="marLeft10">{$rank.value}人</span>
                                                    </li>
                                                </volist>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/Public/js/common/highcharts/highcharts.js"></script>
<script>
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        exporting: {
            enabled:false
        },
        credits: {
            enabled: false
        },
        title: {
            text: '用户性别'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.y}人',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: '人数',
            colorByPoint: true,
            data: [{$sexStr}]
        }]
    });

    Highcharts.chart('container2', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        exporting: {
            enabled:false
        },
        credits: {
            enabled: false
        },
        title: {
            text: '设备'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.y}人',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: '人数',
            colorByPoint: true,
            data: [{$phoneStr}]
        }]
    });

    Highcharts.chart('container3', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        exporting: {
            enabled:false
        },
        credits: {
            enabled: false
        },
        title: {
            text: '城市'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.y}人',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: '人数',
            colorByPoint: true,
            data: [{$cityStr}]
        }]
    });
</script>